<template>
  <el-dialog
    title="题目详情"
    v-model="state.visible"
    width="800px"
  >
    <div class="detail_content">
      <span>【题】</span>
      <div v-html="state.question.content" class="line-break"></div>    
      <!-- <div v-for="url in state.question.images" :key="url" class="block">      
        <el-image style="width: 250px;" :src="url" />
      </div>       -->
      <span>【答案】</span>
      <div v-html="state.question.answer" class="line-break"></div>
       <!-- <div v-for="url in state.question.images_answer" :key="url" class="block">      
        <el-image style="width: 250px;" :src="url" />
      </div> -->
      <span>【解析】</span>
      <div v-html="state.question.explain" class="line-break"></div>      
      <!-- <div v-for="url in state.question.images_explain" :key="url" class="block">      
        <el-image style="width: 250px;" :src="url" />
      </div> -->
      <p>【题型】{{ state.question.type_cn }}</p>
      
    </div> 

    <template #footer>
      <div class="dialog_footer">
        <el-button type="primary" @click="state.visible = false">关 闭</el-button>        
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
  import { reactive, onMounted, toRefs} from 'vue'
  import { type_display } from '@/utils'
  const props = defineProps({
    question: Object,
  });
 
  const state = reactive({
    visible: false,     //控制本组件的对话框显示和隐藏
    images:[],
    question:Object,
  });
  onMounted(()=>{
    state.question = toRefs(props.question)
   
  })
  // 开启弹窗,把图片分隔-,得到数组字符串，并更新到state中
  const open = (question_item) => {
    // console.log("详情接收传过来的数据：",question_item)
    state.question = question_item
    state.visible = true
  };
  // 关闭弹窗
  const close = () => {
    state.visible = false
  };
  // 将需要暴露出去的数据与方法都可以暴露出去
  defineExpose({ open, close })
</script>

<style scope>
  .detail_content p{
    white-space: pre-wrap;      
  }
  .line-break{
    white-space: pre-wrap;
  }
  img{
    display:block;
  }
  .block{
    display:block;
  }
  .dialog_footer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
</style>